import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import { PAGE_SIZE } from 'constants'
import PropTypes from 'prop-types'

import Style from './likeDetails.css'

let type = {
  'HUMAN_SPACE': '人文空间',
  'FAMILY_SPACE': '家居室内',
  'BIZ_SPACE': '商业空间',
  'COMMON_SPACE': '公共空间',
  'PAVILION_SPACE': '展馆空间',
  'OTHER_SPACE': '其他空间'
}
class LikeDetails extends Component {
  static propTypes = {
    getlikeList: PropTypes.func,
    match: PropTypes.any,
    likeData: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '场景编号',
        dataIndex: 'sceneId',
        key: 'sceneId',
        width: 100,
        sorter: (a, b) => a.sceneId - b.sceneId
      },
      {
        title: '场景名称',
        dataIndex: 'categoryName',
        key: 'categoryName',
        width: 100,
        sorter: (a, b) => a.categoryName - b.categoryName
      },
      {
        title: '场景类别',
        dataIndex: 'categoryCode',
        key: 'categoryCode',
        width: 100,
        render: text => type[text]
      },
      {
        title: '点赞时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      }
    ]
  }

  getUsersTableCols () {
    return [
      {
        title: '用户Id',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100
      },
      {
        title: '用户名称',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '用户类型',
        dataIndex: 'memberLevelName',
        key: 'memberLevelName',
        width: 100
      },
      {
        title: '点赞数量',
        dataIndex: 'likeCount',
        key: 'likeCount',
        width: 100
      }
    ]
  }

  componentDidMount () {
    const { id } = this.props.match.params
    this.id = id
    const { pageSize, pageNo } = this.state
    this.props.getlikeList({
      pageSize,
      pageNo,
      userId: id
    })
  }

  onPageChange (pageNo, pageSize) {
    const params = {}
    params.pageNo = pageNo
    params.pageSize = pageSize
    params.userId = this.id
    this.setState({
      pageNo
    })
    this.props.getlikeList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const params = {}
    params.pageNo = current
    params.pageSize = pageSize
    params.userId = this.id
    this.props.getlikeList(params)
  }

  render () {
    const { likeData } = this.props
    const { pageNo } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: likeData && likeData.totalCount,
      onChange: this.onPageChange,
      pageSize: PAGE_SIZE
    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-like-details']}>
            <div className={Style['users-info-container']}>
              <CustomTable loading={false} columns={this.getUsersTableCols()} dataSource={[{
                userId: likeData && likeData.userId,
                mobile: likeData && likeData.mobile,
                userName: likeData && likeData.userName,
                memberLevelName: likeData && likeData.memberLevelName,
                likeCount: likeData && likeData.likeCount
              }]} pagination={false} bordered />
            </div>
            <div className={Style['title']}>数据列表</div>
            <CustomTable loading={!likeData} columns={this.getTableCols()} dataSource={(likeData && likeData.likeList) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  likeData: state.users.likeData
})
const mapDispatch = dispatch => ({
  getlikeList: dispatch.users.getlikeList
})
const FormLikeDetails = Form.create()(LikeDetails)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormLikeDetails)
)
